<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
    </el-row>
    <h2>欢迎您 </h2>
    <template>
        <div class="user-profile">
            <el-card class="user-profile-card">
                <div slot="header" class="clearfix">
                    <span class="user-profile-title">用户信息</span>
                </div>
                <el-row class="user-profile-row">
                    <el-col :span="8" class="user-avatar-col">
                        <div class="avatar-uploader">
                            <el-avatar shape="square" :size="120" :src="user.imagPath" class="avatar"></el-avatar>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <el-form label-width="80px" class="user-info-form">
                            <el-form-item label="用户名：">
                                <span>{{ user.userName }}</span>
                            </el-form-item>
                            <el-form-item label="邮箱：">
                                <span>{{ user.emailAddress }}</span>
                            </el-form-item>
                            <el-form-item label="电话：">
                                <span>{{ user.phone }}</span>
                            </el-form-item>
                            
                        </el-form>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </template>
    <h2>以下为可以接单的所有订单 </h2>
    <el-table :data="AllCanSendOrder" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="onlyId" label="订单编号"></el-table-column>
        <el-table-column prop="goodInfo" label="货物信息" align="center"></el-table-column>
        <el-table-column prop="receivePhone" label="接收人电话" align="center"></el-table-column>
        <el-table-column prop="startTime" label="下单时间" align="center"></el-table-column>
        <el-table-column  label="状态" align="center" >未派送</el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="primary" @click="acceptOrder(scope.row)">接单</el-button>
                </el-row>
            </template>
        </el-table-column>

    </el-table>
    <!-- 分页工具条 -->
    <el-pagination  @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                    :current-page="currentPage2" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount2">
    </el-pagination>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-submenu index="1">
            <template slot="title">我接下的订单</template>
            <el-menu-item index="1-1">待送订单</el-menu-item>
            <el-menu-item index="1-2">全部订单</el-menu-item>
        </el-submenu>
    </el-menu>
    <div class="line"></div>
    <!-- 根据用户选择显示订单 -->
    <el-table v-if="activeIndex === '1-1'" :data="AllUnSendOrders" border style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="onlyId" label="订单编号"></el-table-column>
        <el-table-column prop="goodInfo" label="货物信息" align="center"></el-table-column>
        <el-table-column prop="receivePhone" label="接收人电话" align="center"></el-table-column>
        <el-table-column prop="startTime" label="下单时间" align="center"></el-table-column>
        <el-table-column prop="endTime" label="取出时间" align="center" ></el-table-column>
        <el-table-column v-if="false" prop="toUserId" ></el-table-column>
        <el-table-column  label="状态" align="center" >寄件中</el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="primary" @click="openDialog(scope.row)">已送达，要投放</el-button>
                    <el-button type="primary" @click="goToTalk(scope.row)">联系该用户</el-button>

                </el-row>
            </template>
        </el-table-column>
        <!-- 其他列 -->
    </el-table>
    <el-table v-else-if="activeIndex === '1-2'" :data="AllMyOrders" border style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="onlyId" label="订单编号"></el-table-column>
        <el-table-column prop="goodInfo" label="货物信息" align="center"></el-table-column>
        <el-table-column prop="receivePhone" label="接收人电话" align="center"></el-table-column>
        <el-table-column prop="startTime" label="下单时间" align="center"></el-table-column>
        <el-table-column prop="endTime" label="取出时间" align="center" ></el-table-column>
        <el-table-column v-if="false" prop="toUserId" ></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="rowScope">
                <span v-if="rowScope.row.status === 0">未派送</span>
                <span v-if="rowScope.row.status === 1">寄件中</span>
                <span v-if="rowScope.row.status === 2">未取出</span>
                <span v-if="rowScope.row.status === 3">已取出</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
            <template slot-scope="scope">
                <el-row>
                    <el-button type="primary" @click="goToTalk(scope.row)">联系该用户</el-button>
                </el-row>
            </template>
        </el-table-column>

        <!-- 其他列 -->
    </el-table>
    <!-- 分页工具条 -->
    <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>




    <el-dialog title="投件选择" :visible.sync="selectDialog">
        <el-menu :default-active="selectIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect2">
            <el-submenu index="1">
                <template slot="title">所有快递柜</template>
                <el-menu-item index="1-1">一号柜</el-menu-item>
                <el-menu-item index="1-2">二号柜</el-menu-item>
                <el-menu-item index="1-3">三号柜</el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="line"></div>
        <el-table v-if="selectIndex === '1-1'" :data="Occupy[0]" border style="width: 100%">
            <el-table-column prop="getNumber" label="格子数"></el-table-column>
            <el-table-column prop="status" label="">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 1" style="color: green;">可用</span>
                    <span v-else style="color: red;">不可用</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="addOccupy(scope.row)">投放于此</el-button>
                    </el-row>
                </template>
            </el-table-column>
            <!-- 其他列 -->
        </el-table>

        <el-table v-if="selectIndex === '1-2'" :data="Occupy[1]" border style="width: 100%">
            <el-table-column prop="getNumber" label="格子数"></el-table-column>
            <el-table-column prop="status" label="">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 1" style="color: green;">可用</span>
                    <span v-else style="color: red;">不可用</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="addOccupy(scope.row)">投放于此</el-button>
                    </el-row>
                </template>
            </el-table-column>
            <!-- 其他列 -->
        </el-table>
        <el-table v-if="selectIndex === '1-3'" :data="Occupy[2]" border style="width: 100%">
            <el-table-column prop="getNumber" label="格子数"></el-table-column>
            <el-table-column prop="status" label="">
                <template slot-scope="scope">
                    <span v-if="scope.row.status === 1" style="color: green;">可用</span>
                    <span v-else style="color: red;">不可用</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="addOccupy(scope.row)">投放于此</el-button>
                    </el-row>
                </template>
            </el-table-column>
            <!-- 其他列 -->
        </el-table>
    </el-dialog>





</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>

<script src="js/jquery-2.1.1.min.js"></script>
<script>

    new Vue({
        el: "#app",
        data() {
            return {
                order:{
                    onlyId:'',
                    goodInfo:'',
                    status:'',
                    startTime:'',
                    receivePhone:'',
                    endTime:'',
                    getWord:'',
                    transportId:'',
                    fromUserId:'',
                    toUserId:''
                },
                sendOrder:{
                    onlyId:'',
                    goodInfo:'',
                    status:'',
                    startTime:'',
                    receivePhone:'',
                    endTime:'',
                    getWord:'',
                    transportId:'',
                    fromUserId:'',
                    toUserId:'',
                    sendAddress:'',
                    receiveAddress:''
                },
                log:false,
                DialogVisible:false,
                dialogFormVisible:false,
                pageSize: 5,
                totalCount: 1,
                currentPage: 1,
                user:{
                    id:'',
                    userName:'',
                    identity:'',
                    phone:'',
                    emailAddress:'',
                    nowMoney:'',
                    imagPath:'',
                    defaultGetAddress:'',
                    defaultSendAddress:''
                },
                receiveAddressAndGetWord:{
                    getAddress:'',
                    getWord:''
                },
                activeIndex:'1-2',
                dialogVisible:false,
                selectResultOrder:[],
                AllCanSendOrder:[],

                occupy:{
                    onlyId:'',
                    getWord:'',
                    getAddress:'',
                    status:'',
                    fromUserId:'',
                    getNumber:'',
                },

                Index:'1-2',
                AllMyOrders:[],
                AllUnSendOrders:[],
                pageSize2: 5,
                totalCount2: 1,
                currentPage2: 1,

                dialogTableVisible:false,
                getDialogFromVisible:false,
                selectDialog:false,
                selectIndex:'1-1',
                Occupy:[3][30],
                selectOnlyId:'',
            }
        },
        mounted() {
            // 初始化加载数据

            this.selectUserInfo();
            this.getCountOfSendingOrders();
            this.getTotalCountOfAllCanSendOrder();
            this.getTotalCountOfAllMyOrder();
            this.selectSendingOrderByCondition();
            this.selectAllCanSendOrderByCondition();
            this.selectAllOrderByCondition();
            this. getOccupy();

        },
        computed: {
            totalPages() {
                // 计算总页数
                return Math.ceil(this.totalCount / this.pageSize);
            }
        },
        methods: {
            goToChange() {
                window.location.href = 'login.html';
            },

            selectUserInfo(){
                var _this=this;
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/User/selectUserInfo" )
                    .then((resp) => {
                        _this.user=resp.data;
                        _this.sendOrder.fromUserId=_this.user.id;
                        _this.sendOrder.receiveAddress=_this.user.defaultSendAddress;
                        _this.sendOrder.sendAddress=_this.user.defaultGetAddress;
                        console.log(_this.user.imagPath);
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },


            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                if (this.activeIndex === '1-1') {
                    this.selectSendingOrderByCondition();
                } else if (this.activeIndex === '1-2') {
                    this.selectAllOrderByCondition();
                }

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                this.activeIndex = key;
                this.currentPage=1;
                if (this.activeIndex === '1-1') {
                    this.selectSendingOrderByCondition();
                } else if (this.activeIndex === '1-2') {
                    this.selectAllOrderByCondition();
                }
            },
            /**查询所有接单后但没有送达的订单**/
            selectSendingOrderByCondition() {

                var _this=this
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/selectSendingOrderByCondition?"+"CurrentPage="+this.currentPage+"&PageSize="+this.pageSize+""  )
                    .then(resp => {
                        _this.AllUnSendOrders = [];
                        if (typeof resp.data === 'object' && resp.data!== null){
                            _this.AllUnSendOrders.push(resp.data);}else{
                            // 使用split方法将字符串按照"}"分割成数组
                            const responseDataArray = resp.data.split('}').map(item => {
                                if (item) return JSON.parse(item + '}');
                                else return null;
                            }).filter(item => item !== null);

                            // 根据数组长度判断是否为单个对象或多个对象组成的数组
                            if (responseDataArray.length === 1) {
                                // 如果数组长度为1，则直接解析JSON数据
                                _this.AllUnSendOrders = responseDataArray[0];
                            } else {
                                // 如果数组长度大于1，则将整理后的数据添加到tableData中
                                _this.AllUnSendOrders = _this.AllUnSendOrders.concat(responseDataArray);
                            }}
                        _this.getCountOfSendingOrders();
                    })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });


            },



            getCountOfSendingOrders(){
                var _this=this;
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/getCountOfSendingOrders" )
                    .then((resp) => {
                        _this.totalCount=resp.data;
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },









            /** 获取所有该快递员的接单快递**/

            selectAllOrderByCondition() {

                var _this=this
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/selectAllOrderByCondition?"+"CurrentPage="+this.currentPage+"&PageSize="+this.pageSize+""  )
                    .then(resp => {
                        _this.AllMyOrders = [];
                        if (typeof resp.data === 'object' && resp.data!== null){
                            _this.AllMyOrders.push(resp.data);}else{
                            // 使用split方法将字符串按照"}"分割成数组
                            const responseDataArray = resp.data.split('}').map(item => {
                                if (item) return JSON.parse(item + '}');
                                else return null;
                            }).filter(item => item !== null);

                            // 根据数组长度判断是否为单个对象或多个对象组成的数组
                            if (responseDataArray.length === 1) {
                                // 如果数组长度为1，则直接解析JSON数据
                                _this.AllMyOrders = responseDataArray[0];
                            } else {
                                // 如果数组长度大于1，则将整理后的数据添加到tableData中
                                _this.AllMyOrders = _this.AllMyOrders.concat(responseDataArray);
                            }}
                        _this.getTotalCountOfAllMyOrder();
                    })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });


            },


            getTotalCountOfAllMyOrder(){
                var _this=this;
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/getCountOfAllOrder" )
                    .then((resp) => {
                        _this.totalCount=resp.data;
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },

            /** 获取所有可以接单的订单信息**/
            acceptOrder(row) {
                const id =row.onlyId ;

                //var _this = this;
                this.$confirm('确定接下这一单吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/ChenXufeng_Fengchao_System/Courier/acceptOrder?"+"onlyId="+id,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectAllCanSendOrderByCondition();
                            this.$message({
                                message: '成功接单，快递哥哥别太辛苦',
                                type: 'success'
                            });
                            this.selectSendingOrderByCondition();
                            this.selectAllOrderByCondition();
                        }else {
                            this.selectAllCanSendOrderByCondition();
                            this.$message({
                                message: '已经被其他人抢先接下这一单了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消接单'
                    });
                });
            },

            selectAllCanSendOrderByCondition() {
                var _this=this
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/selectAllCanSendOrderByCondition?" +"CurrentPage="+this.currentPage2+"&PageSize="+this.pageSize2+"" )
                    .then(resp => {
                        _this.AllCanSendOrder = [];
                        if (typeof resp.data === 'object' && resp.data!== null){
                            _this.AllCanSendOrder.push(resp.data);}else{
                            // 使用split方法将字符串按照"}"分割成数组
                            const responseDataArray = resp.data.split('}').map(item => {
                                if (item) return JSON.parse(item + '}');
                                else return null;
                            }).filter(item => item !== null);

                            // 根据数组长度判断是否为单个对象或多个对象组成的数组
                            if (responseDataArray.length === 1) {
                                // 如果数组长度为1，则直接解析JSON数据
                                _this.AllCanSendOrder = responseDataArray[0];
                            } else {
                                // 如果数组长度大于1，则将整理后的数据添加到tableData中
                                _this.AllCanSendOrder = _this.AllCanSendOrder.concat(responseDataArray);
                            }}
                        _this.getTotalCountOfAllCanSendOrder();
                    })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },
            getTotalCountOfAllCanSendOrder(){
                var _this=this;
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/getCountOfAllCanSendOrder" )
                    .then((resp) => {
                        _this.totalCount2=resp.data;
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },
            handleSizeChange2(val) {
                this.pageSize2 = val;
                this.selectAllUnSendOrderByCondition();
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.selectAllUnSendOrderByCondition();
            },
            /**要进行投放的操作**/


            handleSelect2(key, keyPath) {
                console.log(key, keyPath);
                this.selectIndex = key;
            },
            getOccupy(){
                var _this=this;
                axios.get("http://localhost:8080/ChenXufeng_Fengchao_System/Courier/selectAllOccupy" )
                    .then((resp) => {
                        _this.Occupy=resp.data;
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            },
            openDialog(row){
                this.selectOnlyId=row.onlyId;
                this.selectDialog=true;
            },
            addOccupy(row){
                const flag =row.status ;
                var getAddress=1;
                if(this.selectIndex==='1-2'){
                    getAddress=2;
                }else if(this.selectIndex==='1-3'){
                    getAddress=3;
                }
                if(flag===1){
                var _this = this;
                this.$confirm('确定投放在这里?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/ChenXufeng_Fengchao_System/Courier/addOccupy?"+"onlyId="+_this.selectOnlyId+"&getAddress="+getAddress+"&getNumber="+row.getNumber+"",
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.$message({
                                message: '成功投放，快递哥哥辛苦了',
                                type: 'success'
                            });
                            this.getOccupy();
                            this.selectDialog=false;
                            this.selectSendingOrderByCondition()
                        }

                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消投放'
                    });
                });
                }else{
                    this.$message({
                        message: '抱歉，当前货物柜已占满',
                        type: 'warning'
                    });
                }
            },
            goToTalk(row){
                if(row.toUserId===2147483647 ){
                    this.$message({
                        message: '该用户尚未注册',
                        type: 'error'
                    });
                }else{
                window.location.href = 'main.html?receivePhone='+row.receivePhone;}
            },


        },

    });
</script>
<style scoped>
    .user-profile {
        margin: 20px;
    }
    .avatar-uploader {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #f4f4f4;
        position: relative;
    }
    .avatar {
        width: 100%;
        height: 100%;
    }
</style>
</body>
</html>
